<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        header {
            background: url('https://unsplash.it/1280/?image=88') no-repeat;
            background-size: cover;
            width: 100%;
            height: 100vh;
            padding: 32px;
            box-sizing: border-box;
            font-family: 'Roboto', sans-serif;
        }
        section {
            display: table;
            width: 100%;
            height: 100%;
            border: solid 1px #fff;
            background: rgba(255, 255, 255, 0.2);
        }
        h1 {
            padding: 0;
            margin: 0;
            color: #fff;
            font-weight: 100;
            font-size: 4em;
            text-align: center;
            text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
            display: table-cell;
            vertical-align: middle;
            line-height: 0.2em;
            text-transform: uppercase;
        }
        span {
            padding: 0 10px;
            font-size: 0.2em;
            font-weight: 300;
            letter-spacing: 0.5em;
            background: #fff;
            color: #555;
            text-transform: uppercase;
            text-shadow: none;
        }
        i {
            background: linear-gradient(90deg, #dc143c 50%, #c61236 51%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: none;
        }
    </style>
</head>
<body>
<link href='http://fonts.useso.com/css?family=Roboto:400,100,300,500' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<header>
    <section>
        <h1>I <i class="fa fa-heart"></i> Barcelona<br><span>Why go anywhere else?</span></h1>
    </section>
</header>
</body>
</html>